<template>
	<div>
		<el-table :data="levelAllData" fit="true" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="scope">
					<el-table :show-header="false" empty-text="此用户暂无下级" :data="scope.row.children" fit="true" style="width: 100%">
						<el-table-column type="expand">
							<template slot-scope="props">
								<el-table empty-text="此用户暂无下级" :show-header="false" :data="scope.row.children" fit="true" style="width: 100%">
									<el-table-column prop="user" label="用户信息">
										<template slot-scope="props">
											<div class="show_user">
												<img :src="props.row.headimg_url ? props.row.headimg_url : require('@/assets/images/empty_user.png')" />
												<div>
													<p>{{props.row.alias ? props.row.alias : "无名氏"}}</p>
													<p>{{props.row.user | getUserCardId}}</p>
												</div>
											</div>
										</template>
									</el-table-column>
									<el-table-column label="用户身份">
										<template slot-scope="props">
											<span>{{props.row.business_role | getUserDes}}</span>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</el-table-column>
						<el-table-column prop="user" label="用户名">
							<template slot-scope="props">
								<div class="show_user">
									<img :src="props.row.headimg_url ? props.row.headimg_url : require('@/assets/images/empty_user.png')" />
									<div>
										<p>{{props.row.alias ? props.row.alias : "无名氏"}}</p>
										<p>{{props.row.user | getUserCardId}}</p>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="用户身份">
							<template slot-scope="props">
								<span>{{props.row.business_role | getUserDes}}</span>
							</template>
						</el-table-column>
						<!--<el-table-column slot="empty" class="emptylist">
							<template >
								<img style="width: 60px;" src="@/assets/images/empty_userlist.png"/>
							</template>
						</el-table-column>-->
					</el-table>

				</template>
			</el-table-column>
			<el-table-column label="用户信息">
				<template slot-scope="props">
					<div class="show_user">
						<img :src="props.row.headimg_url ? props.row.headimg_url : require('@/assets/images/empty_user.png')" />
						<div>
							<p>{{props.row.alias ? props.row.alias : "无名氏"}}</p>
							<p>{{props.row.user | getUserCardId}}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="用户身份">
				<template slot-scope="props">
					<span>{{props.row.business_role | getUserDes}}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { userGetLevels, Login } from '@/assets/util/api.js'
	export default {
		data() {
			return {
				levelAllData: "",
				access_token: "",
			};
		},
		mounted() {
			this.access_token = this.inStorage("get", "access_token");
			this.userGetLevels();
		},
		methods: {
			userGetLevels() {
				var _this = this;
				var params = {
					access_token: this.access_token,
				}

				userGetLevels(this, params).then((res) => {
					console.log(res);
					if(res.data.state == true) {
						_this.levelAllData = res.data.data;
					}

					if(res.data.code) {
						_this.$message.error(_this.publicMsg(res.data.code, res.data.error));
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.show_user {
		img {
			float: left;
			border-radius: 50%;
			width: 45px;
			margin-right: 5px;
		}
		p {
			margin: 0;
		}
	}
</style>